import 'package:flutter/material.dart';
import 'package:flutter_boost/boost_navigator.dart';
import 'package:hzcloud_flt/feature/index.page.dart';
import 'package:hzcloud_flt/feature/router.dart';
import 'package:hzcloud_flt/feature/service.page.dart';

import 'mine.page.dart';

class TabbarPage extends StatefulWidget {
  final int selectedIndex;

  const TabbarPage({Key key, this.selectedIndex = 0}) : super(key: key);

  @override
  State<TabbarPage> createState() => _TabbarPageState();
}

class _TabbarPageState extends State<TabbarPage>
    with AutomaticKeepAliveClientMixin {
  int _selectedIndex;
  PageController _pageController;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static List<Widget> _widgetOptions = <Widget>[
    HomePage(),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    ServicePage(),
    MinePage()
  ];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _selectedIndex = widget.selectedIndex;
    _pageController = PageController();
  }

  onTapItem(int index) {
    if (index == 3) {
      BoostNavigator.instance.push(HZRouter().pageModule.loginPage.path);
    }
    _selectedIndex = index;
    _pageController.jumpToPage(_selectedIndex);
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    double itemWidth = MediaQuery.of(context).size.width / 5;
    return Scaffold(
      body: SafeArea(
          child: PageView(
        controller: _pageController,
        children: _widgetOptions,
        physics: NeverScrollableScrollPhysics(), //禁止滑动
      )),
      floatingActionButton: FloatingActionButton(
        child: Image.asset(
          'assets/images/tabqr.png',
          fit: BoxFit.fill,
        ),
        onPressed: () {},
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        //导航栏内容
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          //设置内容
          children: <Widget>[
            BottomBarItem(
                title: "首页",
                icon: 'assets/images/shouye.png',
                selectedIcon: 'assets/images/shouyexuanzhong.png',
                itemWidth: itemWidth,
                isSelected: _selectedIndex == 0,
                onTap: () {
                  onTapItem(0);
                }),
            BottomBarItem(
                title: "发现",
                icon: 'assets/images/faxian.png',
                selectedIcon: 'assets/images/danxianxuanzhong.png',
                itemWidth: itemWidth,
                isSelected: _selectedIndex == 1,
                onTap: () {
                  onTapItem(1);
                }),
            BottomBarItem(
                title: "",
                icon: 'assets/images/faxian.png',
                selectedIcon: 'assets/images/danxianxuanzhong.png',
                itemWidth: itemWidth,
                isSelected: _selectedIndex == 1,
                onTap: () {}),
            BottomBarItem(
                title: "服务",
                itemWidth: itemWidth,
                isSelected: _selectedIndex == 2,
                icon: 'assets/images/xietong.png',
                selectedIcon: 'assets/images/xietongxuanzhong.png',
                onTap: () {
                  onTapItem(2);
                }),
            BottomBarItem(
                title: "我的",
                itemWidth: itemWidth,
                isSelected: _selectedIndex == 3,
                icon: 'assets/images/wode.png',
                selectedIcon: 'assets/images/wodexuanzhong.png',
                onTap: () {
                  onTapItem(3);
                }),
          ],
        ),
      ),
    );
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}

class BottomBarItem extends StatefulWidget {
  final String title;
  final String icon;
  final String selectedIcon;
  final Function onTap;
  final bool isSelected;
  final double itemWidth;

  const BottomBarItem({
    Key key,
    @required this.title,
    @required this.icon,
    @required this.selectedIcon,
    @required this.onTap,
    this.isSelected = false,
    this.itemWidth,
  }) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _BottomBarItemState();
  }
}

class _BottomBarItemState extends State<BottomBarItem> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    Image icon =
        Image.asset(widget.isSelected ? widget.selectedIcon : widget.icon);
    Color titleColor = widget.isSelected ? Colors.blueAccent : Colors.grey;

    return SizedBox(
      width: widget.itemWidth,
      height: 49,
      child: Container(
        margin: EdgeInsets.only(top: 5),
        child: GestureDetector(
          behavior: HitTestBehavior.opaque,
          onTap: () {
            widget.onTap();
          },
          child: Column(
            // mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              icon,
              Expanded(
                child: Text(
                  widget.title,
                  style: TextStyle(color: titleColor, fontSize: 13),
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}
